import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:netflix_social/constants/app_constants.dart';
import 'package:netflix_social/models/video.dart';
import 'package:netflix_social/theme/app_theme.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

class ContentRow extends StatelessWidget {
  final String title;
  final List<Video> videos;
  final bool showProgress;
  final bool showRank;
  final bool showFriendAvatar;

  const ContentRow({
    Key? key,
    required this.title,
    required this.videos,
    this.showProgress = false,
    this.showRank = false,
    this.showFriendAvatar = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (videos.isEmpty) {
      return const SizedBox.shrink();
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 16, right: 16, top: 24, bottom: 12),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: Theme.of(context).textTheme.titleMedium,
              ),
              Text(
                '查看全部',
                style: TextStyle(
                  color: Colors.grey[500],
                  fontSize: 14,
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: showRank ? 240 : 200,
          child: ListView.builder(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            scrollDirection: Axis.horizontal,
            itemCount: videos.length,
            itemBuilder: (context, index) {
              return _buildVideoItem(
                context,
                video: videos[index],
                index: index,
              );
            },
          ),
        ),
      ],
    );
  }

  Widget _buildVideoItem(
    BuildContext context, {
    required Video video,
    required int index,
  }) {
    const double posterWidth = 130;
    
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(
          context,
          AppConstants.videoDetailRoute,
          arguments: video.id,
        );
      },
      child: Container(
        width: posterWidth,
        margin: const EdgeInsets.only(right: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 排名标记
            if (showRank && index < 3) ...[
              Padding(
                padding: const EdgeInsets.only(bottom: 4),
                child: Row(
                  children: [
                    Icon(
                      Icons.star,
                      size: 16,
                      color: index == 0
                          ? Colors.amber
                          : index == 1
                              ? Colors.grey[300]
                              : Colors.brown[300],
                    ),
                    const SizedBox(width: 4),
                    Text(
                      'No.${index + 1}',
                      style: TextStyle(
                        color: index == 0
                            ? Colors.amber
                            : index == 1
                                ? Colors.grey[300]
                                : Colors.brown[300],
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ],
            
            // 视频海报
            Stack(
              children: [
                // 海报图片
                ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: AspectRatio(
                    aspectRatio: 2 / 3,
                    child: CachedNetworkImage(
                      imageUrl: video.thumbnailUrl,
                      fit: BoxFit.cover,
                      placeholder: (context, url) => Container(
                        color: Colors.grey[800],
                        child: const Center(
                          child: CircularProgressIndicator(
                            valueColor: AlwaysStoppedAnimation<Color>(
                              AppTheme.netflixRed,
                            ),
                            strokeWidth: 2,
                          ),
                        ),
                      ),
                      errorWidget: (context, url, error) => Container(
                        color: Colors.grey[800],
                        child: const Icon(
                          Icons.error,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
                
                // 好友头像（如果需要）
                if (showFriendAvatar)
                  Positioned(
                    top: 8,
                    right: 8,
                    child: Container(
                      width: 30,
                      height: 30,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: Colors.white,
                          width: 2,
                        ),
                        image: DecorationImage(
                          image: NetworkImage(
                            'https://randomuser.me/api/portraits/men/${index + 1}.jpg',
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                
                // 播放图标（悬停时显示）
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.transparent,
                          Colors.black.withOpacity(0.7),
                        ],
                        stops: const [0.7, 1.0],
                      ),
                    ),
                    child: Center(
                      child: Container(
                        width: 40,
                        height: 40,
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.5),
                          shape: BoxShape.circle,
                        ),
                        child: const Icon(
                          Icons.play_arrow,
                          color: Colors.white,
                          size: 24,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            
            // 进度条（如果需要）
            if (showProgress) ...[
              const SizedBox(height: 4),
              LinearPercentIndicator(
                percent: (video.watchProgress ?? 0) / 100,
                lineHeight: 2,
                backgroundColor: Colors.grey[800],
                progressColor: AppTheme.netflixRed,
                padding: EdgeInsets.zero,
                barRadius: const Radius.circular(1),
              ),
            ],
            
            // 视频标题
            const SizedBox(height: 8),
            Text(
              video.title,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            
            // 视频信息
            const SizedBox(height: 4),
            Text(
              '${video.year} • ${video.duration}分钟',
              style: TextStyle(
                color: Colors.grey[500],
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
